<template>
    <div>
        <!-- 搜索区 -->
        <Search 
        v-model="queryModel.query" 
        :loading="queryLoaing"
        @search="
        queryModel.pagenum=1;
        getUserList()
        "
        @click="
        model={};
        $refs.d.show();
        ">
           添加用户
        </Search>
       <!-- <div class="deng">
            <el-input v-model="queryModel.query" placeholder="请输入内容">
                 <el-button :loaing="queryLoaing"  @click="queryModel.pagenum=1;getUserList()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <el-button type="primary" @click="model={};$refs.d.show();">添加用户</el-button>
        </div> -->
        <!-- 表格 -->
        <MyTable 
        :loading="tableLoading" 
        :data="list"
        :cols="cols"
        :total="total"
         v-model="queryModel" 
         @change="getUserList">
            <template v-slot:state="{row}">
                    <el-switch 
                    @change="switchState(row)" 
                    v-model="row.mg_state">
                    </el-switch>
            </template>
              <template v-slot:action="{row}">
                     <el-button class="el-icon-edit" type="primary" size="mini" @click="model={...row};$refs.d.show();"></el-button>
                    <el-button class="el-icon-delete-solid" type="danger" size="mini" @click="deleteUser(row)"></el-button>
                    <el-button 
                    class="el-icon-s-tools" 
                    type="warning" 
                    size="mini" 
                    @click="model={...row};getRoleList()"></el-button>
               </template>
        </MyTable>
        <!-- <el-table v-loading="tableLoading" row-key="id" border :data="list">
             <el-table-column label="#" type="index"></el-table-column>
             <el-table-column label="姓名" prop="username"></el-table-column>
             <el-table-column label="邮箱" prop="email"></el-table-column>
             <el-table-column label="手机" prop="mobile"></el-table-column>
             <el-table-column label="角色" prop="role_name"></el-table-column>
             <el-table-column label="状态" prop="mg_state">
                <template v-slot="{row}">
                      <el-switch @change="switchState(row)" v-model="row.mg_state"></el-switch>
                </template>
             </el-table-column>
             <el-table-column label="操作" width="300px" align="center">
               <template v-slot="{row}">
                    <el-button class="el-icon-edit" type="primary" size="mini" @click="model={...row};$refs.d.show();"></el-button>
                    <el-button class="el-icon-delete-solid" type="danger" size="mini" @click="deleteUser(row)"></el-button>
                    <el-button 
                    class="el-icon-s-tools" 
                    type="warning" 
                    size="mini" 
                    @click="model={...row};getRoleList()"></el-button>
               </template>
             </el-table-column>
        </el-table> -->
        <!-- 分页 -->
        <!-- <el-Pagination
            @size-change="
            (v)=>
            {queryModel.pagesize=v;
            getUserList();
            }
            "
            @current-change="v=>{
                queryModel.pagenum=v;
                getUserList();
            }"
            :current-page="queryModel.pagenum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryModel.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-Pagination> -->
        <!-- 添加修改 -->
        <MyDialog :title="this.title+'用户'" ref="d" @confirm="confirm">
        {{model}}
         <MyForm v-model="model"
         :opts="opts"
         >

         </MyForm>
             <!-- <el-form label-width="70px" :model="model" :rules="rules" ref="form">
                <el-form-item label="用户名" prop="username">
                    <el-input :disabled="!!model.id" v-model="model.username" :maxlength="10"></el-input>
                </el-form-item>
                <el-form-item v-if="!model.id" label="密码" prop="password">
                    <el-input type="password" v-model="model.password" :maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="model.email" :maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="model.mobile" :maxlength="11"></el-input>
                </el-form-item>
             </el-form> -->
        </MyDialog>
        <!-- <el-dialog :close-on-click-modal="false" :title="this.title+'用户'" :visible.sync="visible">
             <el-form label-width="70px" :model="model" :rules="rules" ref="form">
                <el-form-item label="用户名" prop="username">
                    <el-input :disabled="!!model.id" v-model="model.username" :maxlength="10"></el-input>
                </el-form-item>
                <el-form-item v-if="!model.id" label="密码" prop="password">
                    <el-input type="password" v-model="model.password" :maxlength="15"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="model.email" :maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="model.mobile" :maxlength="11"></el-input>
                </el-form-item>
             </el-form>
             <div slot="footer">
                <el-button @click="visible=false">取消</el-button>
                <el-button type="primary" :loading="confirmLoaing" @click="confirm">确定</el-button>
             </div>
        </el-dialog> -->
        <!-- 删除弹框 -->
        <!-- <MyConfirm title="测试标题" message="提示消息"/> -->
    <!-- 分配角色 -->
    <MyDialog title="分配角色" ref="ad" @confirm="changeRole">
        <p>
            当前的用户：{{model.username}}
        </p>
        <p>
            当前的角色：{{model.role_name}}
        </p>
        <p>分配新角色：
            <el-select v-model="model.rid">
                <el-option 
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
                </el-option>
            </el-select>
        </p>
    </MyDialog>
     <!-- <el-dialog
      :close-on-click-modal="false" 
      title="分配角色" 
      :visible.sync="assVisible">
     <p>
        当前的用户：{{model.username}}
    </p>
     <p>
        当前的角色：{{model.role_name}}
    </p>
     <p>分配新角色：
        <el-select v-model="model.rid">
            <el-option 
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
            </el-option>
        </el-select>
     </p>
             <div slot="footer">
                <el-button @click="assVisible=false">取消</el-button>
                <el-button type="primary" :loading="confirmLoaing" @click="changeRole">确定</el-button>
             </div>
        </el-dialog> -->
        <!-- 添加修改 -->
         <!-- {{model}}
        <MyForm v-model="model"
         :opts="opts"
         >
         
         </MyForm> -->
    </div>
</template>

<script>
import {getUsers,changeState,addUser,updataUser,delUser} from "api/user"

import {getRoles, updataRole} from "api/rights"

import { pageMixins } from "@/mixins/baseMixins"
import Search from "@/components/Search.vue" 

const opts={
    username:{
        title:'用户名',
        required:true,
        // tag:'input',//默认 可省略
        // type:'text',//默认 可省略
        max:10,
        // dis:true,
        ph:"请输入用户名",
        rules:[{min:5}] 
    },
    password:{
        title:'密码',
        required:true,
        // tag:'input',//默认 可省略
        type:'password',
        max:15,
        ph:"请输入密码",
    },
    email:{
        title:'邮箱',
        required:true,
        // tag:'input',//默认 可省略
        max:30,
        ph:"请输入邮箱",
        rules:[{ type: "email", message: "邮箱格式不对" }]
    },
    mobile:{
        title:'手机',
        required:true,
        // tag:'input',//默认 可省略
        type:'mobile',
        max:11,
        ph:"请输入手机",
        // rules:[{ pattern:/^1[3-9]\d{9}$/, message: "手机格式不对" }]
    },
}
// 判断值

   export default {
    mixins: [pageMixins],
    name: "users",
    data() {
        return {
            opts,
            // /**
            //  * 数据列表
            //  */
            // list:[],
            // /**
            //  * 查询loading
            //  */
            // queryLoaing:false,
            /**
             * 表格loading
             */
            tableLoading: false,
            /**
             * 添加修改模型
             */
            model: {},
            /**
             * 规则
             */
            rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    { min: 3, max: 10, message: "用户名长度为3~10位" },
                ],
                password: [
                    { required: true, message: "密码不能为空" },
                    { min: 6, max: 15, message: "密码长度为6~15位" },
                ],
                email: [
                    { required: true, message: "邮箱不能为空" },
                    { type: "email", message: "邮箱格式不对" },
                ],
                mobile: [
                    { required: true, message: "手机不能为空" },
                    { pattern: /^1[3-9]\d{9}$/, message: "手机格式不对" },
                ],
            },
            //     /**
            //      * 总条数
            //      */ 
            //     total:0,
            //     /** 
            //      * 查询模型
            //     */
            //    queryModel:{
            //      query:"",
            //      pagenum:1,
            //      pagesize:4,
            //    },
            /**
             * 获取角色列表
             */
            roles: [],
            /**
             * 列
             */
            cols: [
                {
                    title: "#",
                    type: "index",
                },
                {
                    title: "姓名",
                    name: "username",
                },
                {
                    title: "邮箱",
                    name: "email",
                },
                {
                    title: "手机",
                    name: "mobile",
                },
                {
                    title: "角色",
                    name: "role_name",
                },
                {
                    title: "状态",
                    slot: "state",
                },
                {
                    title: "操作",
                    slot: "action",
                    align: "center",
                    width: 270,
                },
            ],
        };
    },
    created() {
        this.getUserList();
    },
    methods: {
        /**
         * 修改角色
         */
        async changeRole() {
            const ad = this.$refs.ad;
            try {
                ad.start();
                // this.confirmLoaing=true;
                await updataRole(this.model.id, this.model.rid);
                this.$m.success("角色修改成功");
                ad.hide();
                // this.assVisible=false;
                this.getUserList();
            }
            catch (error) {
                console.log(error);
            }
            ad.stop();
            // this.confirmLoaing=false;
        },
        /**
         * 获取角色列表
         */
        async getRoleList() {
            try {
                this.tableLoading = true;
                this.roles = await getRoles();
                const rid = this.roles.find((c) => c.roleName === this.model.role_name)?.id ??
                    this.roles[0].id;
                this.$set(this.model, "rid", rid);
                this.$refs.ad.show();
                // this.$refs.ad.start();
                // this.assVisible=true;
            }
            catch (error) { }
            this.tableLoading = false;
        },
        /**
         * 删除用户
         */
        async deleteUser({ id, username }) {
            let res;
            try {
                res = await this.$myConfirm(`你确定要删除【${username}】吗？`);
                await delUser(id);
                this.$m.success("删除成功");
                this.getUserList();
            }
            catch (error) {
                console.log(error);
            }
            res && res();
        },
        /* 添加修改 */
        async confirm() {
            console.log(123);
            const d = this.$refs.d;
            try {
                // await this.$refs.form.validate();
                d.start();
                await (this.model.id ? updataUser : addUser)(this.model);
                d.hide();
                this.$m.success(this.title + "成功");
                this.getUserList();
            }
            catch (error) { 
                console.log(error);
            }
            d.stop();
        },
        /* 状态 */
        async switchState({ id, mg_state }) {
            try {
                await changeState(id, mg_state);
                this.$m.success("状态变更成功");
                getUserList();
            }
            catch (error) { }
        },
        // 数据
        async getUserList() {
            try {
                this.queryLoaing = true;
                const { total, users } = await getUsers(this.queryModel);
                this.total = total;
                this.list = users;
                console.log(this.list);
            }
            catch (error) { }
            this.queryLoaing = false;
        }
    },
    computed: {
        title() {
            return this.model.id ? "修改" : "添加";
        }
    },
    components: { Search }
}   
</script>

<style scoped lang="scss">
.deng{
    display: flex;
    width: 300px;
    margin-left: 20px;
}
</style>